import React from 'react';
import { Modal, Form, Input, Button, } from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};

class CarRule extends React.Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <FormItem {...formItemLayout} label="父级品牌">
                    {getFieldDecorator('username', {
                        rules: [{
                            required: true,
                            message: '请输入父级品牌',
                        }],
                    })(
                        <Input placeholder="请输入父级品牌" />
                        )}
                </FormItem>
                <FormItem {...formItemLayout} label="汽车之家URL">
                    {getFieldDecorator('nickname', {
                        rules: [{
                            required: true,
                            message: '请输入汽车之家URL',
                        }],
                    })(
                        <Input placeholder="请输入汽车之家URL" />
                        )}
                </FormItem>
            </div>
        );
    }
}

const WrappedCarRule = Form.create()(CarRule);

class CarModel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            brand: '',
            url: '',
        };
    }
    save = () => {
        const { onOk } = this.props;
        this.refs.carForm.validateFields(
            (err) => {
                if (!err) {
                    console.info('success');
                    onOk && onOk();
                }
            },
        );
    }
    render() {
        const { visible, onCancel } = this.props;

        return (
            <Modal
                visible={visible}
                title="新增型号"
                onOk={this.save}
                onCancel={onCancel}
                okText="保存"
                cancelText="取消"
            >
                <WrappedCarRule ref="carForm" />
            </Modal>
        )
    }
}

export default CarModel;